<template>
	<view class="user">
		<u-navbar :back="false" :fixed_h="false" :titleStyle="{opacity:`${Math.round(scrollTopp) / 150}`}" title="我的"
			:bgColor="`rgba(255,255,255,${Math.round(scrollTopp) / 150})`" />
		<view class="user-box">
			<view class="user-card" :style="{height:(200 + response) + 'px'}"></view>
			<view class="user-content" :style="{top:(response + 10) + 'px'}">
				<view class="user-information"
					@click="multiRedirect(vuex_token?'/subpkg/setupinfo/setupinfo':'/subpkg/login/login')">
					<view class="information-avatar">
						<u-avatar border lineColor="#fff" :src="avarat_state" size="70"></u-avatar>
					</view>
					<view class="information-name">{{vuex_token?vuex_user_name:'登录'}}
						<view class="information-edit">
							<u-icon :name="vuex_token?'edit-pen':'arrow-right'" color="#333"
								:size="vuex_token?20:16"></u-icon>
						</view>
					</view>
				</view>
				<view class="information-operate">
					<view class="operate-business">
						<view class="business-item"
							@click="multiRedirect('/subpkg/order/order?index=2' + '&type=' + 'token')">
							<image src="/static/images/dfh.png" class="business-icon"></image>
							<view class="business-text">待发货</view>
						</view>
						<view class="business-item"
							@click="multiRedirect('/subpkg/order/order?index=3' + '&type=' + 'token')">
							<image src="/static/images/yfh.png" class="business-icon"></image>
							<view class="business-text">已发货</view>
						</view>
						<view class="business-item"
							@click="multiRedirect('/subpkg/order/order?index=6'+ '&type=' + 'token')">
							<image src="/static/images/tk.png" class="business-icon"></image>
							<view class="business-text">退款/售后</view>
						</view>
					</view>
					<view class="operate-list">
						<view class="operate-item" @click="multiRedirect('/subpkg/coupon/coupon?type='+ 'token')">
							<view class="operate-left">
								<image src="/static/images/yhj.png" class="operate-img"></image>
								优惠券
							</view>
							<view class="operate-right">
								<view class="operate-icon">
									<u-icon name="arrow-right" color="#b6b6b6" size="18"></u-icon>
								</view>
							</view>
						</view>
						<view class="operate-item"
							@click="multiRedirect('/subpkg/addresslist/addresslist?type='+ 'token')">
							<view class="operate-left">
								<image src="/static/images/wddz.png" class="operate-img"></image>
								我的地址
							</view>
							<view class="operate-right">
								<view class="operate-icon">
									<u-icon name="arrow-right" color="#b6b6b6" size="18"></u-icon>
								</view>
							</view>
						</view>
						<view class="operate-item" @click="quitLogin" v-if="vuex_token">
							<view class="operate-left">
								<view class="operate-custom">
									<u-icon name="account" color="#333333" size="50rpx"></u-icon>
								</view>
								退出登录
							</view>
							<view class="operate-right">
								<view class="operate-icon">
									<u-icon name="arrow-right" color="#b6b6b6" size="18"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTopp: 0
			};
		},
		onPageScroll(e) {
			this.scrollTopp = e.scrollTop;
		},
		onShow() {
			this.$store.dispatch('upludeusfmo')
		},
		computed: {
			avarat_state() {
				return this.vuex_token ? this.vuex_user_avatar : this.shop_data.logo
			}
		},
		methods: {
			quitLogin() {
				uni.showModal({
					title: '提示',
					content: '确认退出登录?',
					success: (res) => {
						if (res.confirm) {
							this.$u.vuex('card_show', true)
							this.$store.commit('handleLogin', {
								token: '',
								type: 'quit'
							})
						} else if (res.cancel) {}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFF;
	}

	.operate-custom {
		position: relative;
		left: -4px;
		top: -2rpx;
		margin-right: 8rpx;
	}

	.operate-list {
		padding: 20px 15px;

		.operate-item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 130rpx;

			.operate-left {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #333;

				.operate-img {
					width: 50rpx;
					height: 50rpx;
					margin-right: 15rpx;
				}
			}
		}
	}

	.information-operate {
		width: 100%;
		background: #FFF;
		border-radius: 8px;
		margin-top: 15px;

		.operate-business {
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 75px;
			padding-top: 15px;

			.business-item {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				width: 33%;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.8);

				.business-icon {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: 5px;
				}
			}
		}
	}

	.user-box {
		position: relative;
	}

	.user-content {
		position: absolute;
		left: 0;
		width: 100%;
		padding: 0 20px;
		z-index: 11;

		.user-information {
			display: flex;
			align-items: center;
			width: fit-content;

			&.show {
				filter: contrast(0.7);
			}

			.information-name {
				margin-left: 20rpx;
				font-size: 28rpx;
				font-weight: bolder;
				color: #333;
				display: flex;
				align-items: center;

				.information-edit {
					margin-left: 15rpx;
					position: relative;
					top: 1px;
				}
			}
		}
	}

	.user-card {
		width: 100%;
		height: 280px;
		background: #FFCF4F;
		-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 49% 85%, 0% 75%, 0 0);
		clip-path: polygon(50% 0%, 100% 0, 100% 75%, 49% 85%, 0% 75%, 0 0);
	}
</style>
